<template>
  <div class="mine-mutual">
    <!-- 顶部切换 -->
    <div class="tab-header">
      <el-radio-group v-model="activeTab" @change="handleTabChange">
        <el-radio-button label="join">我参与的</el-radio-button>
        <el-radio-button label="create">我发起的</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 互助列表 -->
    <div class="mutual-list">
      <el-card 
        v-for="item in mutualList" 
        :key="item.id.toString()"
        class="mutual-item"
        shadow="hover"
      >
        <div class="item-content">
          <div class="main-info" @click="goToDetail(item)">
            <div class="title-row">
              <h3 class="title">{{ item.title }}</h3>
              <div v-if="activeTab === 'create'" class="review-status">
                <img 
                  :src="getReviewStatusIcon(item.reviewStatus)" 
                  class="status-icon"
                  alt="审核状态"
                />
                <span class="status-text" :class="getReviewStatusClass(item.reviewStatus)">
                  {{ getReviewStatusText(item.reviewStatus) }}
                </span>
                <el-tooltip 
                  v-if="item.reviewStatus === '2' && item.reviewNotes"
                  effect="dark" 
                  :content="item.reviewNotes" 
                  placement="top"
                >
                  <i class="el-icon-warning-outline warning-icon"></i>
                </el-tooltip>
              </div>
            </div>

            <div class="category-row" v-if="item.demandCategory">
              <el-tag size="small" type="info">{{ item.demandCategory }}</el-tag>
            </div>

            <div class="description">{{ item.description }}</div>

            <div class="info-row">
              <span class="publisher">
                <i class="el-icon-user"></i>
                {{ item.publisherName }}
              </span>
              <span class="location" v-if="item.currentResidence">
                <i class="el-icon-location"></i>
                {{ item.currentResidence }}
              </span>
              <span class="date">
                <i class="el-icon-time"></i>
                {{ formatDate(item.createTime) }}
              </span>
            </div>
          </div>
          
          <div class="status-tags">
            <el-tag 
              v-if="item.registrationStatus === '1'"
              type="success"
              size="small">已参与</el-tag>
          </div>
        </div>
      </el-card>

      <!-- 分页器 -->
      <div class="pagination-area" v-if="mutualList.length > 0">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handlePageChange">
        </el-pagination>
      </div>

      <!-- 空状态 -->
      <el-empty 
        v-if="mutualList.length === 0"
        :description="activeTab === 'join' ? '暂未参与任何互助' : '暂未发起任何互助'">
      </el-empty>
    </div>
  </div>
</template>

<script>
import { getMineMutual, getMyMutual } from "@/api/api";

export default {
  name: 'MineMutual',
  data() {
    return {
      activeTab: 'join', // 默认显示我参与的
      mutualList: [],
      currentPage: 1,
      pageSize: 5,
      total: 0
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    formatDate(date) {
      if (!date) return '';
      const dt = new Date(date);
      const year = dt.getFullYear();
      const month = String(dt.getMonth() + 1).padStart(2, '0');
      const day = String(dt.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    handleTabChange() {
      this.currentPage = 1;
      this.loadData();
    },
    
    handlePageChange(page) {
      this.currentPage = page;
      this.loadData();
    },
    
    async loadData() {
      try {
        const params = {
          pageNum: this.currentPage.toString(),
          pageSize: this.pageSize.toString()
        };
        
        const res = await (this.activeTab === 'join' ? getMineMutual(params) : getMyMutual(params));
        
        if (res.code === 200) {
          if (this.activeTab === 'join') {
            this.mutualList = (res.data.records || []).map(item => ({
              ...item,
              id: item.id.toString()
            }));
            this.total = res.data.total || 0;
          } else {
            if (res.data) {
              const list = Array.isArray(res.data) ? res.data : (res.data.records || []);
              this.mutualList = list.map(item => ({
                ...item,
                id: item.id.toString()
              }));
              this.total = res.data.total || res.data.length || 0;
            } else {
              this.mutualList = [];
              this.total = 0;
            }
          }
        }
      } catch (error) {
        console.error('获取列表失败:', error);
        this.$message.error('获取列表失败');
      }
    },
    
    goToDetail(item) {
      this.$router.push({
        path: '/mutual/details',
        query: { id: item.id }
      });
    },
    
    getReviewStatusIcon(status) {
      const iconMap = {
        '0': require('@/assets/img/under_review.png'),
        '1': require('@/assets/img/review_pass.png'),
        '2': require('@/assets/img/review_no.png')
      };
      return iconMap[status] || iconMap['0'];
    },
    
    getReviewStatusClass(status) {
      return {
        'status-reviewing': status === '0',
        'status-passed': status === '1',
        'status-rejected': status === '2'
      };
    },
    
    getReviewStatusText(status) {
      const statusMap = {
        '0': '审核中',
        '1': '已通过',
        '2': '未通过'
      };
      return statusMap[status] || '未知状态';
    }
  }
}
</script>

<style lang="less" scoped>
.mine-mutual {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;

  .tab-header {
    margin-bottom: 20px;
    text-align: center;
    
    .el-radio-group {
      background: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    }
  }

  .mutual-list {
    .mutual-item {
      margin-bottom: 16px;
      
      &:last-child {
        margin-bottom: 0;
      }

      .item-content {
        .main-info {
          cursor: pointer;
          
          .title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;

            .title {
              margin: 0;
              font-size: 16px;
              font-weight: 500;
            }

            .review-status {
              display: flex;
              align-items: center;
              gap: 8px;
              white-space: nowrap;

              .status-icon {
                width: 20px;
                height: 20px;
                object-fit: contain;
              }

              .status-text {
                font-size: 14px;
                
                &.status-reviewing {
                  color: #e6a23c;
                }
                
                &.status-passed {
                  color: #67c23a;
                }
                
                &.status-rejected {
                  color: #f56c6c;
                }
              }

              .warning-icon {
                color: #f56c6c;
                cursor: help;
              }
            }
          }

          .category-row {
            margin-bottom: 12px;
          }

          .description {
            color: #606266;
            font-size: 14px;
            margin-bottom: 12px;
            line-height: 1.5;
          }

          .info-row {
            display: flex;
            gap: 16px;
            color: #909399;
            font-size: 13px;

            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }

        .status-tags {
          margin-top: 12px;
          display: flex;
          gap: 8px;
        }
      }
    }
  }

  .pagination-area {
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
}

// 适配移动端
@media screen and (max-width: 768px) {
  .mine-mutual {
    padding: 10px;

    .mutual-list {
      .mutual-item {
        .item-content {
          .title-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;

            .review-status {
              margin-left: 0;
            }
          }

          .info-row {
            flex-direction: column;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>